import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  ImageBackground,
  TouchableOpacity
} from 'react-native';
import RNBridge from '@bridge/index'
import HybridUtil from '@util/index'
import { ImageRequire } from '@mapjs/img-require';
const { imgs } = ImageRequire;


const Header = (props) => {
    const {loginState = '登录', searchNotice = '用现金就办现金分期', bColor = 'transparent'} = props;
  
    return (<View style={[styles.header_container, {backgroundColor:bColor}]}>
        <View style={styles._header_container_txt}><Text style={styles.txtLogin}>{loginState}</Text></View>
        <View style={[styles._header_container, styles._header_container_search]}>
            <View style={{flexDirection:'row',alignItems:'center'}}><Image style={[styles.img_header, {width:20,height:22,marginLeft:4}]} source={imgs['toolbar_search']}></Image>
            <Text style={styles.txtSearch}>{searchNotice}</Text></View>
            <Image style={[styles.img_header, {width:22,height:22, marginRight:3}]} source={imgs['voice_normal']}></Image>
        </View>
        <View style={[styles._header_container, styles.header_container_supp]}>
            <Image style={[styles.img_header, {width:22, height:22}]} source={imgs['ic_server_white']} ></Image>
            <Image style={[styles.img_header, {marginLeft:8}]} source={imgs['ic_message']}></Image>
            <Image style={styles.img_header} source={imgs['ic_add_white']}></Image>
        </View>
    </View>)
  }

  
  const HeaderNeck = props => {
    const { necks = [{name : '账户', img: 'ic_account'}, {name : '资产', img: 'ic_assets'}, {name:'明细', img: 'ic_detail'}, {name:'转账', img: 'ic_tarns'}]} = props;
    
    return <View style={styles.neck_container}>
    {necks.map((item, index)=><View key={index} style={styles.neck_cell}>
      <Image style={styles.img_header} source={imgs[item.img]}></Image>
      <Text style={styles.txtSearch}>{item.name}</Text>
    </View>)}
  </View>
}


const ContentIcons = props => {
  const { necks = [
    {name : '存款', img: 'icbc_money_save'}, 
    {name : '转账汇款', img: 'icbc_tarns'}, 
    {name: '贷款', img: 'icbc_loan'}, 
    {name: '生活缴费', img: 'icbc_self'},
    {name: '投资理财', img: 'ic_finance'},
    {name: '权益中心', img: 'icbc_vip'},
    {name: '贵金属', img: 'icbc_gold'},
    {name: '工银信使', img: 'icbc_messager'},
    {name: '任务中心', img: 'icbc_task_center'},
    {name: '个人信用贷款', img: 'icbc_pay'},
    {name: '分期付款', img: 'icbc_stages'},
    {name: '工银e支付', img: 'icbc_e_pay'},
    {name: '资金自动归集', img: 'question_resetcard'},
    {name: '全部', img: 'icbc_all'},

  ]} = props;
  
  return <View style={styles.contenticon_container}>
  {necks.map((item, index)=><View key={index} style={styles.contenticon_cell}>
    <Image style={styles.icon_content} source={imgs[item.img]}></Image>
    <Text style={styles.icon_text}>{item.name}</Text>
  </View>)}
</View>
}

// 网点服务
const ServicePoint = props => {
  const defalutDetail = {addName:'北京中关村分行营业室', addWay:'距离您1.2km', addDetail:'北京市海淀区上地信息路21号', addPoint:[{name:'未营业',selected:true},{name:'预约',selected:false},{name:'智能',selected:false},{name:'社保',selected:false}]};
  const {title = '服务网点', detail = defalutDetail} = props;

  return (<View style={{marginHorizontal:16, marginVertical:16,}}>
    <View style={[styles.rowline, {marginBottom:10}]}>
      <Text style={[styles.text_common,{fontSize:13,color:'rgba(80,80,80, 0.8)', fontWeight:'bold'}]}>{title}</Text>
      <Image tintColor={'rgba(112,147,226,0.8)'} style={styles.icon_service} source={imgs['ebdpabt_change_img']}></Image>
    </View>
    <View style={styles.service_point_container}>
      <View style={[styles.rowline, {justifyContent:'space-between', width:HybridUtil.screen.width-60, marginBottom:5}]}>
        <ImageBackground resizeMode='contain' source={imgs['preciousmetal_tab_selected']} style={styles.imgbg}><Text style={[styles.text_common,{fontSize:11,color:'rgba(255,255,255, 0.8)', fontWeight:'bold',alignSelf:"center",paddingLeft:2}]}>{' 附近网点'}</Text></ImageBackground>
        <View style={styles.rowline}><Text style={[styles.text_common,{fontSize:11, fontWeight:'bold'}]}>{'其他网点'}</Text><Image tintColor={'red'} style={[styles.icon_service, {width:6,height:6, marginLeft:-4}]} source={imgs['array_right']}></Image></View>
      </View>
      <View style={[styles.rowline, {justifyContent:'space-between', width:HybridUtil.screen.width-60, marginBottom:5}]}>
        <View >
          <Text style={[styles.text_common,{fontSize:12, fontWeight:'bold',color:'rgba(80,80,80, 0.8)'}]}>{detail.addName}</Text>
          <View style={styles.rowline}><Text style={[styles.text_common,{fontSize:11, fontWeight:'400',color:'rgba(112,147,226,0.8)'}]}>{detail.addWay}</Text><Text style={[styles.text_common,{fontSize:12, fontWeight:'400',color:'rgba(100,100,100,0.8)'}]}>{detail.addDetail}</Text></View>
        </View>
        <Image tintColor={'rgba(120,120,120,0.5)'} style={[styles.icon_service, {width:9}]} source={imgs['right_small_arrows']}></Image>
      </View>
      <View style={[styles.rowline, {justifyContent:'space-between', alignItems:'center', width: HybridUtil.screen.width-60}]}>
        <View style={[styles.add_point_container,{marginBottom:5}]}>
          {detail.addPoint.map((item, index)=><View key={index} style={[styles.add_point_container_view, {backgroundColor:item.selected?'rgba(102,109,138,0.8)':'transparent'}]}>
            <Text style={[styles.text_common,{fontSize:8, fontWeight:'bold', color:item.selected?'white':'rgba(102,109,138,0.8)',marginRight:0}]}>{item.name}</Text>
          </View>)}
        </View>
        <View style={[styles.add_point_btns, {marginBottom:5}]}>
          <View style={{flexDirection:'row',alignItems:'center'}}>
            <Image style={[styles.add_point_btns_img, {width:10, height:10}]} source={imgs['newsearch_daohang_icon']}></Image>
            <Text style={[styles.text_common,{fontSize:9, fontWeight:'bold', color:'rgba(112,147,226,0.9)'}]}>{'导航'}</Text>
          </View>
          <View style={{flexDirection:'row',alignItems:'center'}}>
            <Image style={[styles.add_point_btns_img, {width:10, height:10}]} source={imgs['branchnet_phone']}></Image>
            <Text style={[styles.text_common,{fontSize:9, fontWeight:'bold', color:'rgba(112,147,226,0.9)'}]}>{'咨询'}</Text>
          </View>
        </View>
      </View>
    </View>
      <View style={{width:HybridUtil.screen.width-32, backgroundColor:'white',alignSelf:'center',marginTop:12}}>
        <TouchableOpacity onPress={()=>{RNBridge.toast({toast:'正在取号中,请稍后...'})}} style={styles.button_view}><Text style={{color:'white',fontSize:13, fontWeight:'bold'}}>{'取号'}</Text></TouchableOpacity>
      </View>
  </View>)


}


export { Header, HeaderNeck, ContentIcons, ServicePoint };
const styles = StyleSheet.create({
    rowline:{flexDirection:'row', alignItems:'center'},
    text_common:{
      fontFamily: 'lucida grande', 
      fontSize: 12,
      color: 'rgba(253,34,56, 0.7)',
      marginRight:6,
    },
    txtLogin: {
        fontSize: 14,
        color: '#fff',
        fontFamily: 'lucida grande',
      },
      txtSearch: {
        fontSize: 12,
        color: 'rgba(255,255,255, 0.7)',
        paddingHorizontal:2,
        fontFamily: 'lucida grande',
      },
      header_container: {
        flexDirection: 'row',
        height: 50,
        alignItems:'center',
        justifyContent:'space-around',
      },
      _header_container: {
        flexDirection: 'row',
        height: 50,
        alignItems:'center',
        justifyContent:'space-around',
      },
      _header_container_search: {
        flex:2,
        borderColor:'white',
        borderWidth:0.5,
        borderRadius:40,
        height:24,
        marginRight:8,
        justifyContent: 'space-between',
      },
      header_container_supp: {
        flex:1,
      },
      _header_container_txt:{
        flex:0.4,
        paddingLeft:8
      },
      img_header: {
        width: 35,
        height: 35,
        resizeMode: 'contain'
      },
      // ----------------
      neck_container: {
        flex:1,
        height:70,
        paddingBottom:15,
        backgroundColor:'rgba(18,137,170,0.9)',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-around',
      },
      neck_cell: {
        flexDirection:'column',
        alignItems:'center',
      },
      // ---------------
      contenticon_container: {
        flex:1,
        paddingLeft: 5,
        paddingTop: 10,
        flexDirection:'row',
        alignItems:'center',
        flexWrap: "wrap",
      },
      contenticon_cell: {
        flexDirection:'column',
        alignItems:'center',
        height:58,
        width: (HybridUtil.screen.width - 20)/5,
      },
      icon_text: {
        fontSize: 10,
        color: 'rgba(80,80,80, 0.7)',
        paddingHorizontal:6,
        marginTop:4,
        fontFamily: 'lucida grande',
      },
      icon_content: {
        width: 23,
        height: 23,
        resizeMode: 'contain'
      },
      // -------
      service_point_container:{
        flexDirection:'column',
        alignItems:'flex-start',
        backgroundColor:'rgba(180,233,249,0.1)',
        borderWidth:1,
        borderRadius:4,
        borderColor:'rgba(240,240,240,0.8)',
        paddingHorizontal:15,
        paddingVertical:8
      },

      add_point_container: {
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
      },
      add_point_container_view: {
        flexDirection:'row',
        borderColor:'rgba(102,109,138,0.8)',
        borderWidth:1,
        borderRadius:2,
        paddingVertical:1, 
        paddingHorizontal:2,
        marginHorizontal:2,
        justifyContent:'center',
        alignItems:'center'
      },
      add_point_btns: {
        flexDirection:'row',
      },
      add_point_btns_img: {
        width:16,
        height:16
      },
      button_view:{
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'rgba(243,80,75,1)',
        width:HybridUtil.screen.width/2.6,
        height:30,
        borderRadius:50,
        alignSelf:'center'
      },
      icon_service: {
        width: 11,
        height: 11,
        resizeMode: 'contain'
      },
      imgbg:{
        height:32,
        alignItems:'center',
        justifyContent:'center',
        paddingBottom:7,
        paddingLeft:6,
        paddingRight:4
      },

  });